<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 30px auto;
        }
        th,td{
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <table border="2" >
        <thead>
            <tr>
                <th>日期 </th>
                <th> 姓名 </th>
                <th>地址 </th>
                <th> 添加 </th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="tlist">

        </tbody>
    </table>
</body>
<script>
    var  tableData= [{
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

        //   展示数据
    function add(){
        var str = '';
        for(var i=0;i<tableData.length;i++){
            str += `
            <tr>
                <td>${tableData[i].date}</td>
                <td>${tableData[i].name}</td>
                <td>${tableData[i].address}</td>
                <td>
                    <button onclick="tianjia()">添加</button> 
                </td>
                <td>
                    <button onclick="shanchu(${i})">删除</button> 
                </td>
            </tr>  
            `
        }
        var tlist = document.getElementById("tlist");
        tlist.innerHTML = str;
    }
    add()

    // 删除
    function shanchu(index){
        // 删除指定项目
        tableData.splice(index,1)
        add()
    }
    //添加
    function tianjia(){
        var data={
            date: '2016-05-03',
            name: '王小虎5',
            address: '上海市普陀区金沙江路 1516'

        }
        tableData.push(data);
        add()
    }

</script>
</html>